<template>
    <div class="example1-wrapper">
        <div style="float:left;width:625px;height:300px">
            <canvas id="chart1"></canvas>
        </div>
        <div style="float:right;width:500px;height:500px">
            <center style="font-size:18px">近15日商品销售(前四)情况</center>
            <canvas id="chart2"></canvas>
        </div>
        <div style="float:left;width:625px;height:200px">
            <canvas id="chart3"></canvas>
        </div>
    </div>
</template>

<script>
    import BKChart from '@blueking/bkcharts'
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            return {
                username: '',
                mername: '',
                chart1: null,
                chart2: null,
                chart3: null
            }
        },
        created () {
            this.getincome()
        },
        mounted () {
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            getincome () {
                const qs = require('qs')
                this.axios({
                    url: '/getincome/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        // 折线图数据
                        const labelstmp = []
                        const chartdata = []
                        const ordernum = []
                        for (const i in res.data.result_data) {
                            this.$set(labelstmp, i, res.data.result_data[i].endtime)
                            this.$set(chartdata, i, res.data.result_data[i].income_total)
                            this.$set(ordernum, i, res.data.result_data[i].order_num)
                        }
                        // this.$set(this.data1, 'labels', labelstmp)
                        // this.$set(this.data1.datasets[0], 'data', chartdata)
                        const context1 = document.getElementById('chart1')
                        this.chart1 = new BKChart(context1, {
                            type: 'line',
                            data: {
                                labels: labelstmp,
                                datasets: [
                                    {
                                        label: '近15日收入(点击此处显示或隐藏)',
                                        fill: false,
                                        backgroundColor: 'rgba(255,111,114,1)',
                                        borderColor: 'rgba(255,111,114,1)',
                                        data: chartdata
                                    }
                                ]
                            },
                            options: {
                                layout: { padding: 0 },
                                legend: { position: 'bottom' },
                                title: { display: true, text: '近15日收入统计' },
                                scales: {
                                    yAxes: {
                                        scaleLabel: { display: true, labelString: '收入(元)' }
                                    },
                                    xAxes: { scaleLabel: { display: true, labelString: '' } }
                                }
                            }
                        })
                        // 饼图数据
                        const t1 = []
                        const t2 = []
                        if (res.data.cloth_result.length === 0) {
                            this.$set(t1, 0, '销售量为0')
                            this.$set(t2, 0, 1)
                        }
                        if (res.data.cloth_result.length < 5 && res.data.cloth_result.length > 0) { // 小于五项全部显示
                            for (const index in res.data.cloth_result) {
                                this.$set(t1, index, res.data.cloth_result[index][0])
                                this.$set(t2, index, res.data.cloth_result[index][1])
                            }
                        }
                        if (res.data.cloth_result.length > 5) { // 大于5项，第5项显示为其他
                            const tmp = { value: 0, num: 0 }
                            for (tmp.value; tmp.value < res.data.cloth_result.length; tmp.value++) {
                                if (tmp.value < 4) {
                                    this.$set(t1, tmp.value, res.data.cloth_result[tmp.value][0])
                                    this.$set(t2, tmp.value, res.data.cloth_result[tmp.value][1])
                                } else {
                                    tmp.num += res.data.cloth_result[tmp.value][1]
                                }
                            }
                            this.$set(t1, 4, '其他')
                            this.$set(t2, 4, tmp.num)
                        }
                        const context2 = document.getElementById('chart2')
                        this.chart2 = new BKChart(context2, {
                            type: 'pie',
                            data: {
                                labels: t1,
                                datasets: [
                                    {
                                        data: t2,
                                        backgroundColor: [
                                            'rgba(51,157,255,1)',
                                            'rgba(59,206,149,1)',
                                            'rgba(255,156,74,1)',
                                            'rgba(255,111,114,1)',
                                            'rgba(248,211,15,1)'
                                        ],
                                        borderAlign: 'center',
                                        borderColor: '#fff',
                                        borderWidth: 2,
                                        clip: 1.5,
                                        hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
                                        hoverBorderColor: 'rgba(0, 0, 0, 0.1)',
                                        hoverBorderWidth: 1,
                                        weight: 1,
                                        label: 'label'
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                aspectRatio: 1.5,
                                title: { display: true, text: '近15日收入商品销售情况' },
                                cutoutPercentage: 0,
                                position: 'bottom',
                                rotation: -1.5707963267948966,
                                animation: { 'animateRotate': true, 'animateScale': false }
                            }
                        })
                        // 柱状图数据
                        const context3 = document.getElementById('chart3')
                        this.chart3 = new BKChart(context3, {
                            type: 'bar',
                            data: {
                                labels: labelstmp,
                                datasets: [
                                    {
                                        backgroundColor: 'rgba(51,157,255,1)',
                                        borderColor: 'rgba(51,157,255,1)',
                                        borderSkipped: 'bottom',
                                        borderWidth: 1,
                                        clip: '',
                                        data: ordernum,
                                        label: '订单数'
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                legend: { position: 'top' },
                                title: { display: true, text: '基础柱状图' },
                                scales: {
                                    yAxes: {
                                        scaleLabel: { display: true, labelString: '订单数' }
                                    },
                                    xAxes: { scaleLabel: { display: true, labelString: '近15日' } }
                                }
                            }
                        })
                    }
                })
            },
            getdata () {
                return this.data
            }

        }
    }
</script>

<style scoped>
</style>
